<template>
    <div class="app_box">
        <div class="app_box_bg">
            <div class="pay_banner"><img src="../../assets/img/pay/banner_bazi.jpg" alt=""></div>
            <div class="pay_success"><img src="../../assets/img/pay/tijiao.jpg" alt=""></div>
            <!-- 显示 -->
            <div class="pay_box">
                <div class="pay_item pay_left">
                    <div class="pay_head pay_head_1"></div>
                    <div class="pay_name">张易奇大师</div>
                    <div class="pay_desc">知名命里学专家</div>
                </div>
                <div class="pay_item pay_right">
                    <div class="pay_head pay_head_2"></div>
                    <div class="pay_name">{{user.name}}({{user.sex}})</div>
                    <div class="pay_desc">{{user.date}}<br/>{{user.time}}</div>
                </div>
            </div>
            <!-- 价格 -->
            <div class="pay_num">
                <div class="pay_start">原价：￥188</div>
                <div class="pay_cur">优惠价：<span class="pay_unit">￥</span><span class="pay_money">18</span></div>
            </div>
            <div class="way">
                <div class="way_title">- 支付方式 -</div>
                <div class="way_item" @click="onPayFn(1)">
                    <div class="way_text"><div class="way_item_icon way_icon_1"></div>微信支付</div>
                </div>
                <div class="way_item" @click="onPayFn(0)" v-show="!isWeixin">
                    <div class="way_text"><div class="way_item_icon way_icon_2"></div>支付宝支付</div>
                </div>
                <div class="way_tips">已为<span>{{String(Date.now()).slice(0,8)}}</span>人进行在线测算，知悉了自己事业财运、婚姻情感、今年运势上的情况，<span>98.9%</span>用户觉得本测算对人生规划发展有帮助！</div>
            </div>
            <!-- list -->
            <div class="list">
                <div class="list_title">- 支付完成后，您将获得以下重要内容 -</div>
                <div class="list_item" v-for="(item,idx) in list" :key="idx" @click="isAlert=true">
                    <div class="list_lock"></div>
                    <div class="list_name">
                        <div class="list_name_text">{{item.name}}</div>
                    </div>
                    <div class="list_text">
                        <p v-for="(citem,cidx) in item.arr" :key="cidx">{{citem}}</p>
                    </div>
                </div>
            </div>
            <!-- 留言 -->
            <div class="footer">
                <!-- <div class="footer_bbs" @click="onBbs">给大师留言，咨询更多问题
                    <span>></span>
                </div> -->
                <!-- <div class="footer_phone">
                    <div class="footer_phone_text">全国客服电话
                        <span>400-987-2938</span>
                    </div>
                </div> -->
                <div class="footer_item">客服QQ: {{global.qq}}</div>
                <div class="footer_text">世界顶级八字专家团队典鹿全力打造</div>
            </div>
            <!-- 定位btn -->
            <div class="fixed_btn">
                <div class="fixed_btn_text" @click="isAlert=true">付费查看测算结果</div>
            </div>
            <!-- 固定广告 -->
            <!-- <div class="fixed_box">
                <div class="fixed_item" @click="onAdvert('advert')">
                    <div class="fixed_icon fixed_icon_1"></div>
                    <div class="fixed_name">测算历史</div>
                </div>
                <div class="fixed_item" @click="onAdvert('bbs')">
                    <div class="fixed_icon fixed_icon_2"></div>
                    <div class="fixed_name">投诉建议</div>
                </div>
            </div> -->
            <!-- 弹框 -->
            <div class="alert_box" v-show="isAlert">
                <div class="alert_bg"></div>
                <div class="alert_main">
                    <div class="alert_shut" @click="isAlert=false"></div>
                    <div class="alert_title">付费查看全部测算结果</div>
                    <div class="alert_money">统一鉴定价：<span class="alert_money_1">￥</span><span class="alert_money_2">18</span></div>
                    <div class="way_item" @click="onPayFn(1)">
                        <div class="way_text"><div class="way_item_icon way_icon_1"></div>微信支付</div>
                    </div>
                    <div class="way_item" @click="onPayFn(0)" v-show="!isWeixin">
                        <div class="way_text"><div class="way_item_icon way_icon_2"></div>支付宝支付</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 微信弹框 -->
        <div class="wechat" v-show="isWechat">
            <div class="wechat_bg"></div>
            <div class="wechat_box">
                <div class="wechat_img" v-show="isPC">
                    <img :src="wechat" alt="">
                </div>
                <div class="wechat_btn" @click="onClickOver">点击查看结果</div>
            </div>
        </div>
        <!-- 支付宝弹框 -->
        <div class="alipay" v-show="isAlipay">
            <div class="wechat_bg"></div>
            <div class="wechat_box">
                <div class="alipay_btn">点击查看结果</div>
            </div>
        </div>
    </div>
</template>
<script>
    import { Toast,Indicator } from 'mint-ui'
    import axios from 'axios';
    import qs from 'qs';
    export default{
        name:'t',
        data(){
            return{
                isAlert:false,
                list:[{
                    name:'八字命盘',
                    arr:['你的八字排盘是好是坏？','排盘中体现了哪些未来运势？','如何改善其中的不利因素？']
                },{
                    name:'性格分析',
                    arr:['你的性格优缺点有哪些？','优点要如何发挥？','缺点又需要如何弥补？']
                },{
                    name:'财运分析',
                    arr:['你这一生财运走势如何？','阻碍财运的因素有哪些？','是否能抓住机遇增长财富？']
                },{
                    name:'姻缘走势',
                    arr:['你今生的感情生活是否顺利？','何时能遇到自己的正缘？','能否顺利化解感情危机？']
                },{
                    name:'健康状态',
                    arr:['哪些行为不利于你的身心健康？','有什么措施能很好地保持生命活力？']
                },{
                    name:'事业成就',
                    arr:['未来你的事业是否会坎坷？','晋升的方向在哪里？','是否会有贵人相助？']
                },{
                    name:'流月运程',
                    arr:['全年的流月运程如何？','不同月份有哪些需要注意的？']
                }],
                id:'',
                user:{},
                isWechat:false,
                isAlipay:false,
                wechat:'',
                isWeixin:false,
                isPC:false,
                global:this.$global,
            }
        },
        methods:{
            // 设备检测
            envMonitor(){
                const WIN = window;
                const LOC = WIN["location"];
                const NA = WIN.navigator;
                const UA = NA.userAgent.toLowerCase();
                function test(needle) {
                    return needle.test(UA);
                }
                const IsWeixin = test(/micromessenger/);
                const IsAndroid = test(/android|htc/) || /linux/i.test(NA.platform + "");
                const IsIPhone = !IsAndroid && test(/ipod|iphone/);
                const IsIPad = !IsAndroid && test(/ipad/);
                const IsIOS = IsIPad || IsIPhone;
                const IsWinPhone = test(/windows phone/);
                const IsPC = !IsAndroid && !IsIOS && !IsWinPhone;
                const obj = {
                    isWeixin:IsWeixin,
                    isPC:IsPC,
                };
                return obj;
            },
            // bbs
            onBbs(){
                this.$router.push({
                    path:'/bbs'
                })
            },
            // fixed跳转
            onAdvert(router){
                this.$router.push({
                    path:`/${router}`
                })
            },
            // 支付
            onPayFn(n){
                if(n){
                    this.onWechatPay(1)
                    // Toast('微信')
                }else{
                    this.onAlipayPay(2)
                    // Toast('支付宝')
                }
                return false;
                this.$router.push({
                    path:`/payover`,
                    query:{
                        id:this.id,
                        user:this.user,
                    }
                })
            },
            // 微信支付结果
            onClickOver(){
                Indicator.open({
                  text: '加载中...',
                  spinnerType: 'fading-circle'
                });
                const {env,query}=this.$addr;
                axios.get(`${env}${query}`,{
                    params: {
                      order_bid:this.id,
                    }
                  })
                  .then(response=>{
                    Indicator.close();
                    const {code,message,data,currentTime}=response.data;
                    if(code==0){
                        // 成功
                        this.$router.push({
                            path:'payover'
                        })
                    }else{
                        // 失败
                        Toast(message);
                    }
                  })
                  .catch(error=>{
                    Indicator.close();
                    console.log(error);
                  });
            },
            // 微信支付
            onWechatPay(type){
                const isPC = this.isPC;
                if(isPC){
                    // pc
                    this.onWechatPayPc(type);
                }else{
                    // move
                    this.onWechatPayMove(type);
                }
            },
            // 微信支付pc端
            onWechatPayPc(type){
                Indicator.open({
                  text: '加载中...',
                  spinnerType: 'fading-circle'
                });
                const {env,pay}=this.$addr;
                axios.get(`${env}${pay}`,{
                    params: {
                      payWay: type,
                      order_bid:this.id,
                    }
                  })
                  .then(response=>{
                    const {code,data:{base64,ostype},message}=response.data;
                    if(code==0){
                        // 成功
                        this.isWechat = true;
                        this.wechat = base64;
                    }else if(code==-700){
                        // 已经支付
                        this.$router.push({
                            path:'payover'
                        })
                    }else{
                        Toast(message);
                    }
                    Indicator.close();
                  })
                  .catch(error=>{
                    Indicator.close();
                    console.log(error);
                  });
            },
            // 微信支付移动端
            onWechatPayMove(type){
                Indicator.open({
                  text: '加载中...',
                  spinnerType: 'fading-circle'
                });
                const {env,pay}=this.$addr;
                axios.get(`${env}${pay}`,{
                    params: {
                      payWay: type,
                      order_bid:this.id,
                    }
                  })
                  .then(response=>{
                    const {code,data:{weburl,ostype},message}=response.data;
                    // console.log(`${env}${pay}`,response,'微信支付')
                    if(code==0){
                        // 成功
                        this.isWechat = true;
                        location.href = weburl;
                    }else if(code==-700){
                        // 已经支付
                        this.$router.push({
                            path:'payover'
                        })
                    }else{
                        Toast(message);
                    }
                    Indicator.close();
                  })
                  .catch(error=>{
                    Indicator.close();
                    console.log(error);
                  });
            },
            // 支付宝支付
            onAlipayPay(type){
                Indicator.open({
                  text: '加载中...',
                  spinnerType: 'fading-circle'
                });
                const {env,pay}=this.$addr;
                axios.get(`${env}${pay}`,{
                    params: {
                      payWay: type,
                      order_bid:this.id,
                    }
                  })
                  .then(response=>{
                    // console.log(JSON.stringify(response),'支付宝支付')
                    const {code,data,message}=response.data;
                    const index = JSON.stringify(response).indexOf('正在跳转至支付页面...');
                    const rtn = `${env}${pay}?payWay=${type}&order_bid=${this.id}`
                    if(code==undefined){
                        // 无code直接跳转
                        // 成功
                        location.href = rtn;
                    }else{
                        // 有code
                        if(code==-700){
                            // 已经支付
                            this.$router.push({
                                path:'payover'
                            })
                        }else{
                            Toast(message);
                        }
                    }
                    Indicator.close();
                  })
                  .catch(error=>{
                    Indicator.close();
                    console.log(error);
                  });
            },
        },
        created(){
            const {id,user}=this.$route.query;
            this.id = id;
            this.user = user;
            const {isPC,isWeixin}=this.envMonitor();
            // console.log(isPC,isWeixin)
            this.isPC = isPC;
            this.isWeixin = isWeixin;
        }
    }
</script>
<style scoped>
@import url('./base.css');
</style>
